<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
          name="viewport">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>发布</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <link rel="stylesheet" href="../css/demo.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/public.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/exif.js"></script>

    <style>
        .upload_box {
            width: 100%;
            /* margin: 1em auto; */
        }
        .Publish_goods textarea{
            font-size: 14px;
        }
        body{
            background: #fff;
        }

        .upload_drag_area {
            display: inline-block;
            width: 60%;
            padding: 4em 0;
            margin-left: .5em;
            border: 1px dashed #ddd;
            background: #fff url(drag.png) no-repeat 20px center;
            color: #999;
            text-align: center;
            vertical-align: middle;
        }

        .upload_drag_hover {
            border-color: #069;
            box-shadow: inset 2px 2px 4px rgba(0, 0, 0, .5);
            color: #333;
        }

        .upload_preview {
            background-color: #fff;
            overflow: hidden;
            _zoom: 1;
            float: left;
        }

        .upload_append_list {
            /* height: 300px; */
            margin-right: 8px;
            width: 60px;
            height: 60px;
            float: left;
            position: relative;
        }

        .upload_devare {
            margin-left: 2em;
            background: url('../img/删除@2x.png') no-repeat center;
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            width: 12px;
            height: 12px;
            background-size: contain;
        }



        .upload_submit_btn {
            display: none;
            height: 32px;
            font-size: 14px;
        }

        .upload_loading {
            height: 250px;
            background: url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;
        }

        .upload_progress {
            display: none;
            padding: 5px;
            border-radius: 10px;
            color: #fff;
            background-color: rgba(0, 0, 0, .6);
            position: absolute;
            left: 25px;
            top: 45px;
        }
        .upimg{
            width: 60px;
            height: 60px;
        }
        .title,.input{
        	margin-top: 10px;
        	outline: none;
        	border: none;
        }
    </style>
</head>

<body>
    <div class="publishment bc-gray" style="padding-top: 8px;">
        <p class="title">填写标题</p>
        <input type="text" class="input" placeholder="请填写标题" id="title">
        <p class="title">填写内容</p>
        <input type="text" class="input" placeholder="请填写内容" id="des">
        <div id="body" class="light">
           <!-- <div id="content" class="show">
                <div class="demo">
                    <form id="uploadForm" action="http://192.168.1.111:8090/ZITAOHUI/store/enterprise/authentication" method="post" enctype="multipart/form-data">
                        <div class="upload_box">
                            <div class="upload_main">
                                <div id="preview" class="upload_preview"></div>
                                <div class="upload_choose">
                                    <img src="../img/上传照片@2x.png" alt="" style=' width: 54vw;display: block;height: 30vw;margin: 0 auto;position: relative;z-index: 9999;' class="add_img">
                                    <input id="fileImage" type="file" size="30" name="fileselect[]" multiple style="display:none;" />
                                </div>

                            </div>
                            <div class="upload_submit">
                                <button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
                            </div>
                            &lt;!&ndash; <div id="uploadInf" class="upload_inf"></div> &ndash;&gt;
                        </div>
                    </form>
                </div>
            </div>-->
            <div id="content" class="show">
                <div class="demo">
                    <div class="upload_box">
                        <div class="upload_main">
                            <div id="preview" class="upload_preview"></div>
                            <div class="upload_choose" style="float: left;position: relative;">
                                <img src="../img/addcopy@2x.png" alt="" style='width:60px;height:60px;display: block;' id="add_img" >
                                <input id="fileImage" type="file"  style="width: 60px;height: 60px;position: absolute;top: 0;opacity: 0;" onchange="selectFileImage(this)"/>
                            </div>
                        </div>
                        <div class="upload_submit">
                            <button type="button" id="fileSubmit" class="upload_submit_btn">确认上传图片</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--<span id="tianjia" style="margin-top: 5px;display: inline-block;">-->
        	<!--添加一行-->
        <!--</span>-->

        <span class="button" style="border-radius:8px ;">提交发布</span>
    </div>



    <script>
        $(function () {
            $('.hd a').click(function () {
                var index = $(this).index();
                $(this).addClass('active').siblings().removeClass('active');
                $('.bd-0').eq(index).addClass('active').siblings().removeClass('active');
            });

 


        })
    </script>
    <script>
        function selectFileImage(fileObj) {

            var $len = $("#preview .img-div").length;
            if($len == 3){
                alert("对不起，最多可以上传3张哦！");
                return false;
            }
//            var $len = $(fileObj).parent().siblings('.imgdiv').find('div').length;
//        console.log("长度="+$len);
//            if ($len == 3) {
//                layer.open({
//                    content: '感谢小主，评价最多可传3张图哦'
//                    , skin: 'msg'
//                    , time: 2 //2秒后自动关闭
//                });
//                return false;
//            }
//            var data_id = $(fileObj).attr("data-id");
//            var data_index = $(fileObj).attr("data-index");
            var obj = fileObj;
            var file = fileObj.files['0'];
            //console.log(file.size);
            //图片方向角 added by lzk
            var $par = $(this).parent().find(".upload_preview");
            var Orientation = null;

            if (file) {
//            layer.open({type: 2});

                //获取照片方向角属性，用户旋转控制
                EXIF.getData(file, function () {
                    // //alert(EXIF.pretty(this));
                    EXIF.getAllTags(this);
                    ////alert(EXIF.getTag(this, 'Orientation'));
                    Orientation = EXIF.getTag(this, 'Orientation');
                    //return;
                });

                var oReader = new FileReader();
                oReader.onload = function (e) {
                    //var blob = URL.createObjectURL(file);
                    //_compress(blob, file, basePath);
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        var imgWidth = this.width;
                        var imgHeight = this.height;

                        // 控制上传图片的宽高
                        if (imgWidth > imgHeight && imgWidth > 750) {
                            imgWidth = 750;
                            imgHeight = Math.ceil(750 * this.height / this.width);
                        } else if (imgWidth < imgHeight && imgHeight > 1334) {
                            imgWidth = Math.ceil(1334 * this.width / this.height);
                            imgHeight = 1334;
                        }
                        var canvas = document.createElement("canvas"),
                            ctx = canvas.getContext('2d');
                        canvas.width = imgWidth;
                        canvas.height = imgHeight;
                        if (Orientation && Orientation != 1) {
                            switch (Orientation) {
                                case 6:     // 旋转90度
                                    canvas.width = imgHeight;
                                    canvas.height = imgWidth;
                                    ctx.rotate(Math.PI / 2);
                                    // (0,-imgHeight) 从旋转原理图那里获得的起始点
                                    ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                                    break;
                                case 3:     // 旋转180度
                                    ctx.rotate(Math.PI);
                                    ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                                    break;
                                case 8:     // 旋转-90度
                                    canvas.width = imgHeight;
                                    canvas.height = imgWidth;
                                    ctx.rotate(3 * Math.PI / 2);
                                    ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                                    break;
                            }
                        } else {
                            ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                        }
                        base64 = canvas.toDataURL("image/jpeg", 0.8);

                        var $par = $(obj).parent().siblings(".upload_preview");
                        var newsIndex = base64.indexOf(",");
                        var news = base64.substr(parseInt(newsIndex + 1));
                        console.log(news);
                        $.ajax({ //上传头像
                            type: "post",
                            url: base_url+"ZITAOHUI/upload/image",
                            data:{
                                imageData:news
                            },
                            dataType: "json",
                            success: function (data) {
                                //////console.log(data);
                                if (data.code == 1) {
                                    console.log("上传成功");
//                                    _imgarr.push(
//                                        {
//                                            id: data_id,
//                                            url: data.fileUrl
//                                        }
//                                    );
                                    var _url = data.extend.msg.fileUrl;
//                                saveHeaImg(new_url);
                                    $par.append('<div class="img-div" style="float: left;position: relative;margin-right: 10px;"><img class= "upimg" imgurl="' + _url + '" src=' + base64 + '><img class="deleimg" src="../img/del@2x.png" style="width: 12px;position: absolute;z-index:10000000;top: 2px;right: 0;"></div>');
//                                    var $len = $(fileObj).parent().siblings('.imgdiv').find('div').length;
//                                console.log("上传成功之后的长度="+$len);
//                                    if ($len == 3) {
//                                        $(fileObj).attr("disabled", 'false');
//                                        layer.open({
//                                            content: '感谢小主，评价最多可传3张图哦'
//                                            , skin: 'msg'
//                                            , time: 2 //2秒后自动关闭
//                                        });
//                                    }
                                    //console.log(_imgarr);
                                } else{
                                    alert("上传失败");
                                }
                            },
                            error: function (error) {

                            }
                        })
                        ////console.log(news);

                    };
                };
                oReader.readAsDataURL(file);
            }
        }
        $('.button').on('click', function () {

            if(isNull($("#title").val())){
                alert("请填写您的标题");
                return false;
            }
            if(isNull($("#des").val())){
                alert("请填写您的内容");
                return false;
            }
            if($(".upimg").length == 0){
                alert("请上传您的图片");
                return false;
            }

            var imgs = '';
            for(var i = 0;i< $(".upimg").length;i++){
                imgs += ','+$(".upimg").eq(i).attr("imgurl");
            };
            imgs = imgs.replace(/,/,'');
            //提交晒图的描述
            $.ajax({
                url: base_url+'ZITAOHUI/releasesharebio',
                type: 'post',
                data: {
                    userId:sessionStorage.getItem("uid"),
                    images:imgs,
                    discribe:$("#title").val(),
                    content:$("#des").val()
                },
                success: function (data) {
                    if(data.code == 1){
                        alert("上传成功");
                       window.location.href = 'Sunbird.html';
                    }
                },
                error: (data) => {
                    console.log(data)
                }
            })
       /*     $('#fileSubmit').click();
            window.location.href = '../page/Sunbird.html'*/	
        });
        $('.upload_preview').delegate('.deleimg','click',function(){
      	  	$(this).parent().remove();
        })
    </script>
</body>

</html>